<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <base href="<%=basePath%>">

  <title>管理员登录</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">


  <link rel="stylesheet" type="text/css" href="../js/metronic/plugins/face/css/style.css"/>
  <script type="text/javascript" src="../js/metronic/plugins/face/js/jquery-1.4.4.min.js"></script>
  <style>
    body {
      height: 100%;
      background: #213838;
      overflow: hidden;
    }

    canvas {
      z-index: -1;
      position: absolute;
    }
  </style>


  <script src="../js/metronic/plugins/face/js/jquery.js"></script>
  <script src="../js/metronic/plugins/face/js/verificationNumbers.js"></script>
  <script src="../js/metronic/plugins/face/js/Particleground.js"></script>
  <script>
    $(document).ready(function () {
      //粒子背景特效
      $('body').particleground({
        dotColor: '#5cbdaa',
        lineColor: '#5cbdaa'
      });
      //验证码
      createCode();
      //测试提交，对接程序删除即可
      //$(".submit_btn").click(function(){
      // localhost.href="index.jsp";
      //});
    });
  </script>


  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      background-position: center;
      overflow: hidden;
    }

    h1 {
      color: #fff;
      text-align: center;
      font-weight: 100;
      margin-top: 40px;
    }

    #media {
      width: 100%;
      height: 250px;
      margin: 10px auto 0;
      border-radius: 30px;
      overflow: hidden;
      opacity: 0.7px;
    }

    #video {

    }

    #canvas {
      display: none;
    }

    #btn {
      width: 160px;
      height: 50px;
      background: #03a9f4;
      margin: 70px auto 0;
      text-align: center;
      line-height: 50px;
      color: #fff;
      border-radius: 40px;
    }
  </style>
</head>

<body>


<dl class="admin_login">
  <dt>
    <strong>CSI员工之家</strong><em></em> <strong>请把你的脸放摄像头面前</strong>
  </dt>
  <div id="media">
    <video id="video" width="100%" height="300" autoplay></video>
    <canvas id="canvas" width="530" height="300"></canvas>
  </div>
  <dd>
    <input type="button" onclick="query()" value="立即登录"
           class="submit_btn"/>
  </dd>

</dl>
<script type="text/javascript" src="../js/alert.js"></script>
<script type="text/javascript">
  //var 是定义变量
  var video = document.getElementById("video"); //获取video标签
  var context = canvas.getContext("2d");
  var con = {
    audio: false,
    video: true,
    video: {
      width: 1980,
      height: 1024,

    }
  };

  //导航 获取用户媒体对象
  navigator.mediaDevices.getUserMedia(con)
      .then(function (stream) {
        try {
          video.src = window.URL.createObjectURL(stream);
        } catch (e) {
          video.srcObject = stream;
        }

        video.onloadmetadate = function (e) {
          video.play();

        }
      });


  function query() {

    //把流媒体数据画到convas画布上去
    context.drawImage(video, 0, 0, 530, 300);
    var base = getBase64();

    /*
    $.ajax({
      type:"post",
      url:"/api/user/faceLogin",
      data:{"base":base},
      dataType: "json",
      success:function(json){
        if(json.message==""){
          $.MsgBox.Alert("消息","登录失败");
        }else{
          window.parent.location.replace("main");
        }


    }
  });
  */

    window.parent.location.replace("../main.html");
  }

  function getBase64() {
    var imgSrc = document.getElementById("canvas").toDataURL(
        "image/png");

    return imgSrc.split("base64,")[1];

  };
</script>


</body>
</html>
